<template>
<view class="login-page">
  <view class="top-len flex-end">
<!--    <view class="close-btn" @click="$emit('close');">
      <image src="../../static/imgs/login/dl_gb@3x.png" class="close-image"></image>
    </view> -->
  </view>
  
  <view class="middle-logo flex-around flex-column">
	  <image class="logo" src="../../static/imgs/login/dl_logo@3x.png"></image>
		<text class="logotext">门店会员服务专属APP</text>
  </view>
	
	<view class="login-btns flex-around">
		<view class="button flex-column" @click="loginAuth('weixin')">
			<image class="logo" src="../../static/imgs/login/dl_wx@3x.png"></image>
			<text>微信登录</text>
		</view>
		<view class="button flex-column" @click="loginAuth('qq')">
			<image class="logo" src="../../static/imgs/login/dl_qq@3x.png"></image>
			<text>QQ登录</text>
		</view>
	</view>

  <view class="footer">
    <text>登录即默认同意</text>
		<navigator url="/pages/login/UserAgreement" class="link">
			<text class="link">《用户协议》</text>
		</navigator>
  </view>
</view>
</template>

<script>
// import { } from 'vux';
export default {
  name: "Login",
  components: {
  },
  data () {
    return {

    };
  },
  methods: {
	    genderFmt: function (gender) {
			if (gender == '1') {
				return '男'
			}
			if (gender == '2') {
				return '女'
			}
			return gender;
		},
		loginAuth: function (ttype) {
			// #ifdef H5
			var userInfo = {
				loginType: 'qq',
				nickname: 'Spanky',
				gender: '男',
				avatar: 'http://qzapp.qlogo.cn/qzapp/1105975417/4AAA6E621D0940D893B26C7098B47C2D/100',
				openId_qq: '4AAA6E621D0940D893B26C7098B47C2D',
				openId_wx: ''
			};
			this.$store.commit("userStatus", userInfo);
			uni.setStorageSync('userStatus', userInfo);
			// uni.redirectTo({url: '/pages/index/index'});
			uni.navigateBack({});
			return;
			// #endif
			var vm = this;
			uni.showToast({
				title: "",
				icon: "loading"
			});
			uni.login({
				provider: ttype,
				success: function (loginRes) {
					console.log(loginRes.authResult);
					// 获取用户信息
					uni.getUserInfo({
						provider: ttype,
						success: function (infoRes) {
							console.log(infoRes);
							var userInfo = {
								loginType: ttype,
								nickname: infoRes.userInfo.nickName,
								gender: vm.genderFmt(infoRes.userInfo.gender),
								avatar: infoRes.userInfo.figureurl_2 || infoRes.userInfo.avatarUrl,
								openId_qq: ttype == 'qq' ? infoRes.userInfo.openId : '',
								openId_wx: ttype == 'weixin' ? infoRes.userInfo.openId : ''
							};
							uni.hideToast();
							vm.$store.commit("userStatus", userInfo);
							uni.setStorageSync('userStatus', userInfo);
							uni.navigateBack({});
						},
						fail: function (res) {
							uni.showToast({
								title: "授权失败",
								position:'bottom'
							});
						}
					});
				}
			});
		}
  },
  onNavigationBarButtonTap (e) {
      // let pages = getCurrentPages();  // 获取所有页面栈实例列表
      // let nowPage = pages[ pages.length - 1];  // 当前页页面实例
      // let prevPage = pages[ pages.length - 2 ];  // 上一页页面实例
      // prevPage.$vm.searchVal = 1211;
	  // 返回按钮点击
      uni.navigateBack({delta: 1});   
  },
  mounted: function () {
		// #ifdef H5  
		var currentWebview = this.$mp.page.$el.classList.add('noback');
		// #endif
  }
};
</script>

<style lang="scss" scoped>
.login-page {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  .top-len {
    padding: 10pt;
    .pwdlogin {
      color:#808080;
    }
  }
  .close-image {
	  width: 16px;
	  height: 16px;
  }
	.middle-logo {
    margin-top: 20%;
    align-items: center;
		.logo {
			width: 156px;
			height: 80px;
		}
		.logotext {
			margin-top: 10pt;
			color: #A9A9A9;
		}
	}

.login-btns {
	margin: 30% auto;
	width: 80%;
	.button {
		.logo {
			display: block;
			margin: 5pt auto;
			width: 50px;
			height: 50px;
		}
		text {
			color: #8D8D8D;
		}
	}
}
  .footer {
		text-align: center;
		position: absolute;
		width: 100%;
		bottom: 10pt;
		navigator {
			display: inline;
			color: #000;
		}
		text {color: #B7B7B7;}
		.link {
			display: inline;
			color: #000;
		}
	}
}
[data-page~="pages/login/login"] .uni-page-head-hd {
	visibility: hidden;
}
</style>
